<!--
 * @Author: wangyu
 * @Date: 2024-12-25 15:04:18
 * @LastEditTime: 2024-12-28 19:27:10
 * @LastEditors: wangyu
 * @Description: 
 * @FilePath: \dzsq-smartpark-platform\src\App.vue
-->
<template>
  <div
    v-if="route.path === '/test'"
    style="position: absolute; height: 100%; width: 100%"
  >
    <router-view style="width: 100%; height: 100%"></router-view>
  </div>
  <div v-else class="app" :class="{ 'app-bg': path === '/homeindex' }">
    <div class="bigScreen" ref="bigScreenRef" style="overflow: hidden">
      <Header @handleVersionClick="handleVersionClick" />
      <!-- todo：加载三位模型 -->
      <div></div>
      <router-view class="app-content"></router-view>
      <footer class="btns">
        <span
          v-for="item in btns"
          :key="item.name"
          :class="[item.active && 'active']"
          @click="toActive(item)"
          >{{ item.name }}</span
        >
      </footer>
    </div>
  </div>
</template>

<script setup>
import Header from "./components/Header/index.vue";
import Store from "@/store";
// import { useRouter, useRoute } from "vue-router";

const router = useRouter();
const path = ref();
const bigScreenRef = ref();
const treeBgRef = ref();
const preLoaded = ref(false);
const route = useRoute();

const btns = ref([
  {
    name: "园区总览",
    path: "/overview",
    params: { Index: 0 },
    active: true,
  },
  {
    name: "资产管理",
    path: "/assetsManager",
    params: { Index: 1 },
    active: false,
  },
  {
    name: "实时监控",
    path: "/realtimeMonitoring",
    params: { Index: 2 },
    active: false,
  },
  {
    name: "热点新闻",
    path: "/hotNews",
    active: false,
  },
]);
const model = ref("A");
watch(
  () => route,
  (newRoute, oldRoute) => {
    if (model.value !== newRoute.meta.model) {
      // todo 加载相关三维模型
      console.log("加载相关三维模型");
    }
    const arr = btns.value.filter((item) => {
      return item.path === newRoute.path;
    });
    if (arr.length) {
      btns.value.forEach((item) => {
        item.active = false;
      });
      arr[0].active = true;
    }
    model.value = newRoute.meta.model;
  },
  { deep: true, immediate: true }
);
/**
 * @description: 切换tab
 * @return {*}
 */
const toActive = (btn) => {
  if (btn.params) {
    eventBus.emit("SelectMaInUI", btn.params);
  }
  router.push(`${btn.path}`);
};

const getScale = (type, width = 1920, height = 1080) => {
  let ww = window.innerWidth / width;
  let wh = window.innerHeight / height;
  if (type == "whole") {
    // 整体的缩放比
    return ww < wh ? ww : wh;
  } else if (type == "single") {
    //单个宽高的缩放比
    return { ww: ww, wh: wh };
  }
};
const resize = () => {
  if (bigScreenRef.value) {
    bigScreenRef.value.style.transform = `scale(${getScale(
      "whole"
    )}) translate(-50%, -50%)`;
  }
  if (treeBgRef.value) {
    treeBgRef.value.style.transform = `scale(${getScale(
      "whole"
    )}) translate(-50%, -50%)`;
  }
};
// let currentRoute = useRoute();

function handleVersionClick(params) {
  versionHistoryRef?.value?.showDialog();
}

onMounted(() => {
  if (bigScreenRef.value) {
    bigScreenRef.value.style.transform = `scale(${getScale(
      "whole"
    )}) translate(-50%, -50%)`;
    bigScreenRef.value.style.width = `1920px`;
    bigScreenRef.value.style.height = `1080px`;
  }
  if (treeBgRef.value) {
    treeBgRef.value.style.transform = `scale(${getScale(
      "whole"
    )}) translate(-50%, -50%)`;
    treeBgRef.value.style.width = `1920px`;
    treeBgRef.value.style.height = `1080px`;
  }
  window.addEventListener("resize", resize);
});
</script>

<style lang="scss" scoped>
@import "./style/screen.scss";
.app {
  color: #ffffff;
  // background-color: rgb(54, 56, 48);
  .btns {
    position: absolute;
    bottom: 42px;
    left: 50%;
    transform: translateX(-50%);
    > span {
      display: inline-block;
      font-size: 16px;
      color: #8adafd7f;
      height: 67px;
      line-height: 67px;
      width: 162px;
      background-image: url("@/assets/imgs/button-tab.svg");
      background-size: cover;
      background-repeat: no-repeat;
      text-align: center;
      cursor: pointer;
      &:hover {
        background-image: url("@/assets/imgs/button-tab--hover.svg");
      }
      &.active {
        font-size: 18px;
        color: #ffffff;
        background-image: url("@/assets/imgs/button-tab--selected.svg");
      }
    }
  }
  &-content {
    height: calc(100% - 90px - 34px);
  }
}
</style>
